import React, { Fragment, Suspense } from "react"
import { BrowserRouter as Router, Route, Link, NavLink, Switch, withRouter } from "react-router-dom"
import "./Base.css"
import Error from "./Error"
//BrowserRouter 是路由的核心组件,用它作为基石组件,包裹需要使用路由api的组件
//Route是一个路由配方 常用的两个属性 一个path 另一个是component
//Link组件 类似于vue中的router-link 用于路由的跳转
//页面视图组件

//NavLink也是用于导航 切换路径
//activeClassName 被激活的时候加上的类名
//activeStyle 被激活的时候加上的样式
//当定义的类名叫做active的时候,那么active的样式会作用在所有被激活的NavLink组件上
//exact 严格匹配模式
// import Discover from "./pages/Discover"
// import Friend from "./pages/Friend"
// import My from "./pages/My"
// import Page404 from "./pages/Page404"
import CustomLink from "./CustomLink"
//withRouter是一个高阶组件,能把最近的router中的location match history传递给该组件
//withRouter高阶组件只能修饰被Router包裹了的组件
/**
 * 
 * @param {String} path 组件的路径 
 */
function p(module) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // console.log(path);
            // resolve(module)
            reject("网络错误")
        }, 2000)
    })
}

const Discover = React.lazy(() => p(import("./pages/Discover")))
const Page404 = React.lazy(() => p(import("./pages/Page404")))
const My = React.lazy(() => p(import("./pages/My")))
const Friend = React.lazy(() => p(import("./pages/Friend")))

@withRouter
class Base extends React.Component {
    handleClick = () => {
        // console.log(this.props);
        //跳转到discover
        this.props.history.push("/discover")
    }
    render() {
        return (

            <Fragment>
                <CustomLink to="/discover">发现</CustomLink>
                <CustomLink to="/my">我的</CustomLink>
                {/* <NavLink to="/my?name=李雷">我的</NavLink> */}
                <CustomLink to="/friend/123">朋友</CustomLink>
                {/* <NavLink to="/friend/123">朋友</NavLink> */}
                {/* 通过switch,一次只匹配一个路由,匹配成功一个路由之后,那么就不会往下继续匹配路由了 */}
                <Error>
                    <Suspense fallback={<h1>正在加载...</h1>}>
                        <Switch>
                            <Route path="/discover" component={Discover} />
                            <Route path="/my" component={My} />
                            {/* children属性 路由path不匹配也可以加载成功,但是children属性的值必须是一个函数 */}
                            {/* <Route path="/my" children={()=><h1>123</h1>} /> */}
                            <Route path="/friend/:name" component={Friend} />
                            {/* <Route path="/" exact component={Friend} /> */}
                            <Route component={Page404} />
                        </Switch>
                    </Suspense>
                </Error>
                <button onClick={this.handleClick}>Base组件上朴实无华的按钮</button>
            </Fragment>

        )
    }
}

export default Base